<template>
  <div class="internetChannelSkillWrap">
    <!--<div class="title">温馨提示：互联网渠道技能组可用于"网站/wap/H5客服"、"移动APP客服"、"微信客服"、"微博客服"、"邮件"这5类渠道。</div>-->
    <configCompositionTwoWindowStyle>
      <template slot="card">
        <div class="tip" v-if="!$store.state.oemObj.oemFlag">
         {{$t('configLazyLoad.channel.AppAccountTips1')}}：{{this.$store.state.session.account.account}}，{{$t('configLazyLoad.channel.AppAccountTips2')}}
        </div>
        <search
          ref="search1"
          :inputTitle="$t('configLazyLoad.channel.AppInputTitle')"
          :loading="tableLoading"
          @add="addSkillGroup"
          @refresh="refresh"
          @search="searchByName"
          @inputChange="inputChangeSkillName"
          @turnPage="turnPage"
          :currentPage="currentPage"
          :isReloadIvr="false"
          :showAdvSearch="false"
          :count="count"
          :pageSize="10">
        </search>
        <AppTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del" @accessSdk="accessSdk" :loading="tableLoading"></AppTable>
      </template>
      <template slot="detail">
        <BreadCrumbConfig v-if="isShowAddOrEdit" :titleArr="titleArr" @back="cancle"></BreadCrumbConfig>
        <addAppChannelSkillGroup :skillInfo="skillInfo" :isNewApp="isNewApp" @refresh="refresh" v-if="isShowAddOrEdit" v-loading="isLoadingAddOrEdit"></addAppChannelSkillGroup>
        <AppSdkAccess v-if="showSdk" :sdkData="sdkData" :versionData="versionData"></AppSdkAccess>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import * as uuid from 'uuid'
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import search from '../base/search'
  import BreadCrumbConfig from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  import AppTable from '../base/AppTable'
  import addAppChannelSkillGroup from './addAppChannelSkillGroup'
  import AppSdkAccess from './AppSdkAccess'
  import { getCacheByKey, deepClone } from '@/utils/m7Utils.js'
  export default {
    data () {
      return {
        agents: [],
        currentPage: 1,    //   当前页
        tableHeader: [
          {prop: 'name', label: this.$t('configLazyLoad.channel.AppName')},
          {prop: 'lastUpdateTime', label: this.$t('configLazyLoad.channel.lastUpdateTime')},
          {prop: 'handel', label: this.$t('configLazyLoad.channel.handel'), isApp: 'true'}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,      //   表格  loading
        isShowAddOrEdit: false,   //   右侧  新建或修改 显隐
        showSdk: false,           //   右侧接入sdk显示隐藏
        isLoadingAddOrEdit: false,
        titleArr: [this.$t('configLazyLoad.channel.AppAcoutnManage'), this.$t('configLazyLoad.channel.addAppChannel')],
        serachName: '',
        skillInfo: {},
        sdkData: {},
        versionData: {},
        isNewApp: false,
        count: 0
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      BreadCrumbConfig,
      AppTable,
      AppSdkAccess,
      addAppChannelSkillGroup
    },
    methods: {
      addSkillGroup () {
        this.isNewApp = true
        this.$store.dispatch('getDicCache', {type: 'mailQueues'}).then((res) => {
          if (res.data.length <= 0) {
            this.$message(this.$t('configLazyLoad.channel.addSkillGroupTips'))
            return
          } else {
            this.isShowAddOrEdit = true
            this.titleArr[1] = this.$t('configLazyLoad.channel.addAppChannel')
            this.skillInfo = {}
            this.skillInfo.accessId = uuid.v1()
            this.skillInfo.companyName = ''
            this.skillInfo.name = ''
            this.skillInfo.robot = ''
            this.skillInfo.syncAddress = ''
            this.skillInfo.webchat_csr = true
            this.skillInfo.webchat_showTypeName = true
            this.skillInfo.welcome = ''
            this.skillInfo.ToPeer = []
            this.skillInfo.syncAddress = ''
            this.skillInfo.scheduleEnable = false
          }
        })
      },
      refresh () {
        this.$refs.search1.resetForm()
        this.isShowAddOrEdit = false
        this.showSdk = false
        this.currentPage = 1
        this.serachName = ''
        this.search()
      },
      cancle () {
        this.$refs.search1.resetForm()
        this.isShowAddOrEdit = false
        this.showSdk = false
      },
      searchByName (val) {
        this.isShowAddOrEdit = false
        this.showSdk = false
        this.serachName = val
        this.currentPage = 1
        this.search(val)
      },
      inputChangeSkillName (val) {
        this.serachName = val
      },
      search (val) {
        this.tableLoading = true
        this.$store.dispatch('queryAppWebchat', {page: this.currentPage, limit: 10, platform: 'sdk', name: this.serachName}).then((res) => {
          if (res.success) {
            let tableData = res.list
            // 如果没有最后更新时间的处理
            tableData.forEach((item, index) => {
              if (!item.updateTime) {
                item.lastUpdateTime = '--------'
              } else {
                item.lastUpdateTime = item.updateTime
              }
            })
            this.versionData = res.version
            this.tableData = tableData
            this.count = res.count
            this.tableLoading = false
          }
        })
      },
      turnPage (val) {
        this.currentPage = val
        this.search()
      },
      updata (val) {
        let id = val._id
        this.showSdk = false
        this.isNewApp = false
        this.isLoadingAddOrEdit = true
        this.$store.dispatch('queryAppWebchatCfgById', {_id: id}).then(res => {
          if (res.success) {
            this.titleArr[1] = this.$t('configLazyLoad.channel.editAppChannel')
            this.skillInfo = deepClone(res.data)
            this.skillInfo.scheduleEnable = this.skillInfo.scheduleEnable ? this.skillInfo.scheduleEnable : false
            if (typeof res.data.ToPeer === 'string') {
              var peer = getCacheByKey('mailQueues', 'Exten', res.data.ToPeer)
              this.skillInfo.ToPeer = []
              if (peer) {
                this.skillInfo.ToPeer.push({name: peer.DisplayName, id: res.data.ToPeer, status: 'enable'})
              }
            }
            this.isLoadingAddOrEdit = false
            this.isShowAddOrEdit = true
          }
        })
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.channel.confirmDeleteAppChannel'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteAppCfg', data).then(res => {
            if (res.success) {
              this.refresh()
              this.$message({
                message: this.$t('configLazyLoad.channel.SuccessDeleteAppChannel'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      accessSdk (val) {
        let id = val.data._id
        this.$store.dispatch('queryAppWebchatCfgById', {_id: id}).then(res => {
          if (res.success) {
            this.isShowAddOrEdit = false
            this.showSdk = true
            res.sdk = val.sdk
            this.sdkData = res
            if (val.sdk === 'android') {
              this.titleArr[1] =  this.$t('configLazyLoad.channel.AndroidAccessCode')
            } else {
              this.titleArr[1] = this.$t('configLazyLoad.channel.IosAccessCode')
            }
          }
        })
      }
    },
    beforeMount () {
      this.search()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .internetChannelSkillWrap
    .title
      color $c-prompt
      height 30px
      line-height 30px
      padding 3px 10px
      border-bottom 1px solid $c-border1
  .tip
    font-size 12px
    padding 10px
    color $c-prompt
    background-color #f4f5f9
    border-bottom 1px solid #cccccc
</style>
